<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title></title>
    <style>
      .head {
        color: aqua;
      }

      .active {
        color: tomato;
      }

      .red {
        color: rgb(25, 179, 202);
      }

      .yellow {
        color: violet;
      }

      .size {
        font-size: 30px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 静态页面写法 -->
      <h1 class="head" style="background-color: rgb(7, 176, 119)">
        许老祖真帅
      </h1>

      <p :class="'red'">火桑女采火桑花</p>
      <p :class="color">火桑女采火桑花</p>
      <button @click="changeClick">按钮</button>

      <p :class="'red'">火桑女采火桑花</p>
      <p
        :class="[
            'size',
            color,
      ]"
      >
        火桑女采火桑花
      </p>
      <button @click="changeClick">点击换颜色</button>

      <p :class="'red'">火桑女采火桑花</p>
      <p
        :class="{
          size:true,
          red:color === 'red',
          yellow:color === 'yellow',
        }
           
      "
      >
        火桑女采火桑花
      </p>
      <button @click="changeClick">点击换颜色</button>

      <ul>
        <li :class="{ active: isChenActive}">课程</li>
        <li :class="{ active: isSeedActive}">直播</li>
        <li :class="{ active: isLiveActive}">活动</li>
      </ul>
    </div>

    <script src="./js/vue.js"></script>

    <script>
      const vm = new Vue({
        //数据
        data: {
          color: "red",
        },

        //方法
        methods: {
          changeClick() { //三元运算符
            //赋值给color
            this.color = this.color === "red" ? "yellow" : "red";
          },
        },
      });

      vm.$mount("#app");
    </script>
  </body>
</html>
